<template>
    <div style="padding: 0 15px;">
        <div class="Kt">
            <div class="kt-tit kt-dis">
                <div style="font-weight: 600;font-family: 'Regular';">Airdrop Missions</div>
                <div class="seebtn" @click="seebnt">
                       <div style="width: 70%;text-align: right;"> See more</div>
                    <div style="width: 30%;position: relative;">
                        <el-icon color="#1B2025" style="position: absolute;top: -6px; right: 10px;"><ArrowRightBold /></el-icon>
                    </div>
                </div>
                
            </div>
            <div style="margin-top: 15px;"></div>
            <div class="Kt-list" @click="btnClick(item)" v-for="(item,index) in list"  :key="index">
                <div style="display: flex;justify-content: space-between; align-items: center;">
                    <div style="display: flex; align-items: center;color: #000;">
                        <img v-if="item.logUrl" :src="item.logUrl" style="width: 38px;height: 38px;border-radius: 50%;">
                        <img v-else src="../static/img/Telegram.png" style="width: 35px;height: 35px;border-radius: 50%;">
                        <div>
                            <div style="font-size: 13px;color: #000;font-family: 'Inter';font-weight: 500;">{{ item.describe }}</div>
                            <div style="display: flex;align-items: center;">
                                <img  src="../static/img/bi.png" style="width: 20px;height: 20px;margin-top: 3px;">
                                <label style="font-size: 13px;color: #000;font-family: 'Inter';font-weight: 500; margin-left:-2px ;margin-top: 2px;">{{ addCommas(item.points) }}</label>
                            </div>
                        </div>
                    </div>
                    <div>
                        <el-icon size="12" color="#1B2025"><ArrowRightBold /></el-icon>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Api from '../api/api'
export default {
    props: {
        list: {
            type: Array,
            default:() => []
        }
    },
    data() {
        return {

        }
    },
    methods: {
        addCommas(number) {
            return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        },

        seebnt() {
            this.$emit('seebnt',4)
        },
        settaskrecord(item) {
            // if(this.imgUrl == '') return ElMessage({message:'Please upload screenshot',type:'error'})
            Api.post('taskrecord/add', {
                imgUrl: '',
                taskType: Number(this.type),
                postContent: this.postContent,
                taskId: Number(this.ids)
            }).then(res => {
                if (res.code == 200) {
                    window.location.href = item.url
                }
            })
        },
        btnClick(item) {
            console.log('dadad',item)
            if (item.url) {
                this.settaskrecord(item)
                return
            }  
            this.$emit('seebnt', 4)
        }
    }
}
</script>

<style lang="scss" scoped>
.Kt-list{
    color: #fff;
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 5px;
    padding: 10px;
    img{
        margin-right: 10px;
    }
}
.Kt{
    background: linear-gradient(180deg, #F5DF8A 33.92%, #F7AD3E 100%);
    border-radius: 10px;
    padding: 15px;
    margin-top: 15px;
    .kt-dis{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .Kt-tit{
        font-size: 16px;
		color: #fff;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-weight: bold;
    }
    .seebtn{
        background: #F5DF8A;
        border-radius: 10px;
        height: 27px;
        width: 80px;
        text-align: center;
        font-size: 12px;
        font-weight: bold;
        line-height: 27px;
        font-family: 'Regular';
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 3px 8px;
        background: #fff;
        position: relative;
    }
}
</style>